<template>
  <div class="carousel-container">
    <div
        class="carousel-wrapper"
        @mousedown="startDrag"
        @mousemove="handleDrag"
        @mouseup="endDrag"
        @mouseleave="endDrag"
        @touchstart="startDrag"
        @touchmove="handleDrag"
        @touchend="endDrag"
    >
      <div
          class="carousel-page"
          v-for="(page, pageIndex) in pages"
          :key="pageIndex"
          :class="{ active: currentPage === pageIndex }"
          :style="{ transform: `translateX(${getPageOffset(pageIndex)}px)` }"
      >
        <!-- Top row -->
        <div class="carousel-row">
          <div
              class="carousel-item"
              v-for="(item, itemIndex) in page.top"
              :key="'top-'+itemIndex"
          >
            <img v-if="item.type === 'image'" :src="item.content" alt="">
            <div v-else class="text-content">
              <div class="number">{{ item.number }}</div>
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
        </div>

        <!-- Bottom row -->
        <div class="carousel-row">
          <div
              class="carousel-item"
              v-for="(item, itemIndex) in page.bottom"
              :key="'bottom-'+itemIndex"
          >
            <img v-if="item.type === 'image'" :src="item.content" alt="">
            <div v-else class="text-content">
              <div class="number">{{ item.number }}</div>
              <div class="text">{{ item.text }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="carousel-dots">
      <span
          v-for="(dot, index) in pages.length"
          :key="index"
          :class="{ active: currentPage === index }"
          @click="goToPage(index)"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'contentPage2',
  data() {
    return {
      currentPage: 0,
      offsetX: 0,
      startX: 0,
      isDragging: false,
      dragStartTime: 0,
      pages: [
        {
          top: [
            { type: 'image', content: require('../../assets/home/home-cont2-1.png') },
            { type: 'text', number: '2649', text: '标识注册总量' },
            { type: 'image', content: require('../../assets/home/home-cont2-2.png') },
            { type: 'text', number: '2507', text: '标识解析总量' },
            { type: 'image', content: require('../../assets/home/home-cont2-3.png') },
            { type: 'text', number: '520', text: '产品扫码次数' }
          ],
          bottom: [
            { type: 'text', number: '20+', text: '涉及行业' },
            { type: 'image', content: require('../../assets/home/home-cont2-4.png') },
            { type: 'text', number: '1000+', text: '产品品类' },
            { type: 'image', content: require('../../assets/home/home-cont2-5.png') },
            { type: 'text', number: '100+', text: '供应地区' },
            { type: 'image', content: require('../../assets/home/home-cont2-6.png') }
          ]
        },
        {
          top: [
            { type: 'image', content: require('../../assets/home/home-cont2-4.png') },
            { type: 'text', number: '50+', text: '企业员工' },
            { type: 'image', content: require('../../assets/home/home-cont2-5.png') },
            { type: 'text', number: '12', text: '配套典型行业' },
            { type: 'image', content: require('../../assets/home/home-cont2-6.png') },
            { type: 'text', number: '9', text: '典型应用案例' }
          ],
          bottom: [
            { type: 'text', number: '634', text: '行业资讯' },
            { type: 'image', content: require('../../assets/home/home-cont2-1.png') },
            { type: 'text', number: '637', text: '企业动态' },
            { type: 'image', content: require('../../assets/home/home-cont2-2.png') },
            { type: 'text', number: '458', text: '政策通知' },
            { type: 'image', content: require('../../assets/home/home-cont2-3.png') }
          ]
        }
      ]
    }
  },
  methods: {
    getPageOffset(pageIndex) {
      if (pageIndex === this.currentPage) {
        return this.offsetX;
      }
      if (pageIndex < this.currentPage) {
        return -window.innerWidth + this.offsetX;
      }
      return window.innerWidth + this.offsetX;
    },
    goToPage(index) {
      this.currentPage = index;
      this.offsetX = 0;
    },
    startDrag(e) {
      this.isDragging = true;
      this.dragStartTime = Date.now();
      this.startX = e.clientX || e.touches[0].clientX;
      this.offsetX = 0;
    },
    handleDrag(e) {
      if (!this.isDragging) return;
      const x = e.clientX || e.touches[0].clientX;
      this.offsetX = x - this.startX;
      e.preventDefault();
    },
    endDrag() {
      if (!this.isDragging) return;
      this.isDragging = false;

      const dragDuration = Date.now() - this.dragStartTime;
      const dragVelocity = Math.abs(this.offsetX) / dragDuration;
      const velocityThreshold = 0.3; // px/ms
      const distanceThreshold = 100; // px

      // Determine direction based on velocity or distance
      if (dragVelocity > velocityThreshold || Math.abs(this.offsetX) > distanceThreshold) {
        if (this.offsetX > 0 && this.currentPage > 0) {
          this.currentPage--;
        } else if (this.offsetX < 0 && this.currentPage < this.pages.length - 1) {
          this.currentPage++;
        }
      }

      this.offsetX = 0;
    }
  }
}
</script>

<style scoped>
.carousel-container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 80px 0;
  overflow: hidden;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  height: 480px;
  overflow: hidden;
  user-select: none;
}

.carousel-wrapper:active {
  cursor: grabbing;
}

.carousel-page {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-page.active {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-row {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 0; /* Remove gap between items */
}

.carousel-item {
  width: 220px;
  height: 220px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0; /* Remove any default margins */
}

.carousel-wrapper:active .carousel-item {
  transform: scale(0.98);
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-content {
  text-align: center;
  padding: 20px;
  background-color: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: none; /* Remove any borders */
}

.number {
  font-weight: 700;
  font-size: 34px;
  line-height: 34px;
  color: #0b41aa;
  margin-bottom: 14px;
  font-family: 'Montserrat', sans-serif;
}

.text {
  font-size: 16px;
  line-height: 1.4;
  color: #333;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.carousel-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #ccc;
  margin: 0 8px;
  transition: all 0.3s ease;
}

.carousel-dots span:hover {
  transform: scale(1.2);
}

.carousel-dots span.active {
  background-color: #0b41aa;
  transform: scale(1.2);
}
</style>